<template>
  <div class="role">
    <el-button size="medium" type="primary" plain @click="add">
      新增角色
    </el-button>
    <div class="role-table">
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="name" label="角色名称"> </el-table-column>
        <el-table-column prop="nameZh" label="角色编码"> </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="description" label="角色描述信息">
        </el-table-column>
        <el-table-column prop="enabled" label="是否启用">
          <template slot-scope="scope">
            <el-tag size="small" type="success" v-if="scope.row.enabled === 1">启用</el-tag>
            <el-tag size="small" v-else-if="scope.row.enabled === 0">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="assignPerm(scope.row)">分配权限</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button size="small" type="text" @click="update(scope.row)">编辑</el-button>
            <!-- <el-divider direction="vertical"></el-divider>
		      <el-button size="small" type="text" @click="handleDelete(scope.row)"
		        >删除</el-button
		      > -->
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!-- 新增/编辑角色按钮 -->
    <el-dialog :visible.sync="dialogVisible" width="50%" :show-close="false" :title="dialogTitle">
      <el-form :model="roleForm" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名" prop="nameZh">
          <el-input placeholder="请输入角色名" v-model="roleForm.nameZh"></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="name">
          <el-input placeholder="请输入角色名编码，以ROLE_作为前缀" v-model="roleForm.name">
          </el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input placeholder="请输入角色描述信息" v-model="roleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled">
          <el-radio-group v-model="roleForm.enabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBtnDialog('roleForm')" v-debounce>
          确 定
        </el-button>
        <el-button @click="cancleBtn">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 分配权限抽屉 -->
    <el-drawer title="分配权限" :visible.sync="drawerLoading" direction="rtl" :show-close="false" :append-to-body="true"
      custom-class="demo-drawer" ref="menu">
      <div class="drawer-ctn">
        <div class="tree-filter">
          <el-input style="width: 70%" placeholder="输入关键字搜索权限数据" v-model="filterText">
          </el-input>
        </div>

        <el-tree class="filter-tree" :data="menuOptions" show-checkbox :default-expand-all="false"
          :filter-node-method="filterNode" ref="menu" node-key="id" empty-text="加载中，请稍后" :props="defaultProps"
          :default-checked-keys="checkedKeys" :check-strictly="checkStrictly"></el-tree>
      </div>
      <div class="demo-drawer__footer">
        <el-button style="width: 60%" type="primary" @click="submitBtnDrawer" v-debounce>确 定
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //过滤变量
      filterText: "",
      //表数据
      tableData: [],

      checkStrictly: false,
      //是否展示抽屉
      drawerLoading: false,
      //抽屉中的角色id
      drawerRid: undefined,
      //数据权限
      permForm: {},
      //菜单列表
      menuOptions: [],
      //树控件数据显示设置
      defaultProps: {
        label: "name",
        children: "children",
      },
      //被选中的节点
      checkedKeys: [28, 29],
      //是否展示对话框
      dialogVisible: false,
      //对话框表单数据
      roleForm: {},
      systemNodeFlag: false,
      //校验规则
      rules: {
        name: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
        nameZh: [{ required: true, message: "请输入角色名", trigger: "blur" }],
        enabled: [
          { required: true, message: "请确定角色是否启用", trigger: "blur" },
        ],
      },
      //对话框标题
      dialogTitle: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.menu.filter(val);
    },
  },

  created() {
    this.initTable();
    this.initMenuList();
  },
  methods: {
    //新增按钮
    add() {
      this.reset();
      this.dialogVisible = true;
      this.dialogTitle = "新增角色";
    },
    //编辑按钮
    update(data) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑角色";
      this.roleForm = Object.assign({}, data);
    },
    //删除按钮
    handleDelete(data) {
      this.$confirm("是否删除" + data.nameZh + "角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.post("/sysRole/delete", { id: data.id }).then((res) => {
          if (res.status) {
            this.initTable();
          }
        });
      });
    },
    //对话框确定按钮
    submitBtnDialog(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.roleForm.id == undefined) {
            this.$axios.post("/sysRole/insert", this.roleForm).then((res) => {
              if (res.status) {
                this.initTable();
                this.dialogVisible = false;
                this.reset();
              }
            });
          } else {
            this.$axios.post("/sysRole/update", this.roleForm).then((res) => {
              if (res.status) {
                this.initTable();
                this.dialogVisible = false;
                this.reset();
              }
            });
          }
        }
      });
    },
    //对话框取消按钮
    cancleBtn() {
      this.dialogVisible = false;
      this.reset();
    },
    //重置表单数据
    reset() {
      this.roleForm = {
        id: undefined,
        name: undefined,
        nameZh: undefined,
        description: undefined,
        enabled: 1,
      };
      this.filterText = "";
    },

    //分配权限按钮
    assignPerm(data) {
      this.filterText = "";
      this.checkedKeys = [];
      this.drawerLoading = true;
      console.log(data);

      this.$axios.get("/sysRole/rolePerms", {
        params: {
          id: data.id,
        },
      }).then((res) => {
        if (res.status) {
          this.checkStrictly = true;

          this.$nextTick(() => {

            this.$refs.menu.setCheckedKeys(res.data);
            this.checkStrictly = false;
          });
          console.log(res.data);
          // console.log("res data", res.data);
          // this.checkedKeys = this.deepCopy(res.data);
          // console.log("checkedKeys", this.checkedKeys);
          // this.$refs.menu.setCheckedKeys(res.data);
          // console.log(this.$refs.menu.setCheckedKeys(res.data));
          this.drawerRid = data.id;
        }
      });
    },

    //抽屉确定按钮
    submitBtnDrawer() {
      // 获取被选中的子节点id
      let selectedKey = this.$refs.menu.getCheckedKeys();

      let half = this.$refs.menu.getHalfCheckedKeys(selectedKey);
      let all = selectedKey.concat(half);

      console.log(all);

      console.log("all", all);
      this.$axios
        .post("/sysRole/handlePerms", {
          id: this.drawerRid,
          menusId: all,
        })
        .then((res) => {
          if (res.status) {
            this.drawerLoading = false;
            this.initTable();
            this.reset();
          }
        });
    },

    //获取菜单数据
    initMenuList() {
      this.$axios.get("/sysMenu/menuList").then((res) => {
        if (res.status) {
          this.menuOptions = res.data;
        }
      });
    },

    //初始化表数据
    initTable() {
      this.$axios.get("/sysRole/list").then((res) => {
        if (res.status) {
          this.tableData = res.data;
        }
      });
      // this.$axios.get("/sysRole/pageList").then((res) => {
      //   if (res.status) {
      //     this.tableData = res.data.list;
      //   }
      // });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
};
</script>

<style scoped>
.role {
  height: 100%;
}

.role-table {
  height: 94%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}

.drawer-ctn {
  overflow-y: auto;
  height: 550px;
}

.tree-filter {
  margin: 5px 0px;
  padding: 5px 10px;
}

.demo-drawer__footer {
  width: 100%;
  position: relative;
  bottom: 10px;
  left: -100px;
  padding: 10px;
  text-align: right;
  background-color: white;
}
</style>